<template>
    <div class="app-container">
        <levelbar></levelbar>
          <div class="table-title">
            <el-form :model="classIdInfofamily" slot="form" label-width="80px">
                <div class="title margin-row margin-text">基础信息</div>
                <el-row :gutter="20" type="flex" justify="space-around" class="margin-row">
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>班级名称:</span>{{classIdInfofamily.className}}<el-button type="text" class="btn-success mr-left" @click="modify">修改</el-button>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div v-if="classIdInfofamily.gradeName">
                          <div class="title-describe" v-cloak> <span>年级:</span>{{classIdInfofamily.gradeName}}</div>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="space-around" class="margin-row">
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>班级码:</span>{{classIdInfofamily.classCode}}</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>班级编号:</span>{{!classIdInfofamily.classNum ? '--' : classIdInfofamily.classNum}}</div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="space-around" class="margin-row">
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>学生数量:</span>{{classIdInfofamily.studentNumber}}</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>班主任:</span>{{!classIdInfofamily.ownerName ? '--' : classIdInfofamily.ownerName}}<el-button type="text" class="btn-success mr-left" @click="btnHeadmaster">修改</el-button>
                        </div>
                    </el-col>
                </el-row>
                <div class="pad-btm"></div>
                <div class="title margin-row margin-text">创建信息</div>
                <el-row :gutter="20" type="flex" justify="space-around" class="margin-row">
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>创建人:</span>{{!classIdInfofamily.creatorName ? '--' : classIdInfofamily.creatorName}}</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="title-describe" v-cloak> <span>创建时间:</span>{{!classIdInfofamily.createTime ? '--' : classIdInfofamily.createTime}}</div>
                    </el-col>
                </el-row>
                <div class="pad-btm"></div>
                <el-row :gutter="20" type="flex" justify="space-around" class="margin-row">
                  <el-button @click="go">返回</el-button>
                </el-row>
            </el-form>
          </div>
        
        <!-- 修改班级名称 -->
        <modifyClassName @classNewName="classNewName" v-if="modifyTeacher.dialogFormVisible" :modifyTeacher="modifyTeacher"></modifyClassName>

        <!-- 班主任详情 -->
        <headmasterData @teacherName="teacherName" v-if="leadershipTeacher.dialogFormVisible" :leadershipTeacher="leadershipTeacher"></headmasterData>
    </div>
</template>
<script>
import Levelbar from "../layout/Levelbar";
import TableLayout from "components/TableLayout";
import modifyClassName from "./comps/modifyClassName";

import headmasterData from "./comps/headmasterData";
import { mapState, mapActions, mapGetters } from "vuex";
import {
  getClassInfo,
} from "api/classAll";

export default {
  name:"classDetails",
  components: { Levelbar, TableLayout,modifyClassName,headmasterData,},
  created() {
    this.getstudentList();
  },
  watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.getstudentList();
        }
    },
  computed: {
    ...mapState({
      config: state => state.config.table,
      cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
    }),
    ...mapGetters(["uid"])
  },
  data() {
    return {
      //班级信息集合
      loading: true,
      classIdInfofamily:{},
      //修改班主任名称-子组件
      modifyTeacher: {
        dialogFormVisible: false
      },
      //班主任详情-子组件
      leadershipTeacher: {
        dialogFormVisible: false,
        id: "",
        classId: "",
        ownerName: ""
      },
    };
  },
  methods: {
    //全局获取行数
    ...mapActions(["ChangePageSize"]),
    getstudentList(){
        getClassInfo(this.$route.params.classId).then(response =>{
            this.classIdInfofamily = response.data.content
        })
    },
    modify(val) {
        this.modifyTeacher.dialogFormVisible = true;
        this.modifyTeacher.id = this.classIdInfofamily.classId;
        this.modifyTeacher.className = this.classIdInfofamily.className;
    },
    classNewName(val) {
      if (!val) {
      } else {
        //发现传递过来数据，刷新父组件的数据
        this.getstudentList();
        this.$store.dispatch('UpdateCache',true);
      }
    },
    btnHeadmaster(val) {
      this.leadershipTeacher.ownerName = this.classIdInfofamily.ownerName;
      this.leadershipTeacher.dialogFormVisible = true;
      this.leadershipTeacher.id = this.classIdInfofamily.schoolId;
      this.leadershipTeacher.classId = this.classIdInfofamily.classId;
    },
    teacherName(val) {
      if (!val) {
      } else {
        //发现传递过来数据，刷新父组件的数据
        this.getstudentList();
        this.$store.dispatch('UpdateCache',true);
      }
    },
    go(){
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.margin-button{
  margin-bottom: 15px;
}
.table-title{
  padding: 20.5px 0;
  background: #fff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}
.margin-row{
  padding: 0 20px;
  margin-bottom: 15px;
}
.margin-text{
 padding-left: 40px 
}
.border-center{
  height: 1px;
  background: #dddddd;
  margin: 30px 0 15px;
}
.pad-btm{
    padding-bottom: 50px;
}
.title-describe{
  
  font-size: 14px;
  span{
    margin-right: 30px;
    color: #999999;
    margin-left: 18px;
    width: 67px;
    display: inline-block;
    text-align: right;
  }
}
.mr-left{
    margin-left: 20px;
}
.title{
  position: relative;
  margin-bottom: 30px;
  font-size: 14px;
  &::after{
    content:'';
    position: absolute;
    left: 20px;
    top: 2px;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
  }
}
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  .app-levelbar {
    height: 35px;
  }
  .el-form {
    background: #fff;
    // padding-bottom: 50px;
  }
}
</style>
